<!-- 自助数据集左右合并关系维护 -->
<template>
<div style="height: calc(100% - 1px);">
  <!-- 添加修改左右合并字段 -->
<el-dialog
  :title="eleviewType=='add'?'合并设置':'修改合并关系'"
  :visible.sync="isShowpup"
  width="75%"
  :before-close="closePup"
  >
  <div class="pup">
    <!-- 弹窗 -->
      <div class="popup" v-loading="isShowLoading">
        <div  style="width:100%;display:flex;justify-content: space-around;">
          <!-- <div>{{}}</div> -->
          <el-button icon="el-icon-circle-plus-outline"  @click="clearS"> 新建关联</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNode" plain> 添加字段</el-button>

          <el-select  @change="selectChanged" v-model="relationType" value-key="value" placeholder="请选择关联方式">
            <el-option
              v-for="(item) in relationTypeArr"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- <div @click="closePup">X</div> -->
        </div>
        <div class="itemBox">
          <div class="item pRight">
            <div style="text-align:center;height:35px;line-height:35px;margin:5px auto;width:80%">合并结果</div>
            <div v-for="(i,ind) of arr" :key="ind">
              <el-input v-model="arr[ind].label" disabled style="width:80%;margin-bottom:5px"></el-input>
            </div>
          </div>
          <div class="item pRight">
          <div style="text-align:center;height:35px;line-height:35px;margin:5px auto;width:100%">
            主表：{{masterTableName}}</div>
            <el-select style="margin-bottom:5px;width:80%" v-for="(i,ind1) of arr" :key="i.leftKeyWords"  @change="(COLUNM_ID)=>currentTable(COLUNM_ID,ind1)" v-model="arr[ind1].leftKeyWords" placeholder="请选择字段">
              <el-option
                v-for="(item) in leftRowList"
                :key="`${item.COLUMN_NAME}-${item.DATA_TYPE}`"
                :label="`${item.COMMENTS}-${item.DATA_TYPE}`"
                :value="`${item.COMMENTS}-${item.DATA_TYPE}`"
                >
              </el-option>
            </el-select>
          </div>
          <div class="item pRight">
            <el-select style="margin-bottom:5px;width:80%;" placeholder="请选择关联表" :value="valueTitle" :clearable="clearable" @clear="clearHandle">
              <el-input
                class="selectInput"
                :placeholder="placeholder"
                v-model="filterText">
              </el-input>
              <el-option  :value="valueTitle" :label="valueTitle" class="options">
                <el-tree  id="tree-option"
                  ref="selectTree"
                  v-loading="isShowTreeLoading"
                  element-loading-text="加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  :accordion="accordion"
                  :data="treeData"
                  :props="props"
                  :node-key="props.value"
                  :default-expanded-keys="defaultExpandedKey"
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick">
                </el-tree>
              </el-option>
            </el-select><i class="el-icon-delete" style="color:transparent"></i>
            <div v-for="(i,index) of arr" :key="arr[index].RightKeyWords">
              <el-select style="margin-bottom:5px;width:80%;" @change="(COLUNM_ID)=>minorTable(COLUNM_ID,index)"  v-model='arr[index].RightKeyWords' placeholder="请选择字段">
              <el-option
                v-for="item in rightRowList"
                :key="item.COLUMN_NAME"
                :label="`${item.COMMENTS}-${item.DATA_TYPE}`"
                :value="`${item.COMMENTS}-${item.DATA_TYPE}`"
                >
              </el-option>
            </el-select><i class="el-icon-delete" @click="deleteItem(index)"></i>
            </div>
          </div>
        </div>
        <el-row style="width:100%;">
          <el-button type="primary" @click="addElevance" plain>预览</el-button>
          <el-button @click="cancelElevance" plain>取消</el-button>
        </el-row>
      </div>
      <!--  -->

  </div>
</el-dialog>
<!-- 左右合并关系展示 -->
  <el-dialog
    title="左右并关系"
    :visible.sync="isShowView"
    width="75%"
    top="2%"
    :before-close="closeView"
    >
       <eleviews-demo v-if="!isShowpup" @tagisShowpup='tagisShowpup' @closePage="closePage"  :showeleviewsData="showeleviewsData" :menuData="menuData"></eleviews-demo>
    </el-dialog>
</div>
</template>
<script>
import {QUERY_FONT_NODE, MGNDIRQUERY1, ADDMERGE, CUST_TABLE_MAINTAIN, GET_DATAINFO} from '@api/url'
import getTime from '@/assets/js/getDate' // 获取当前时间
import eleviewsDemo from './elevanceDemo.vue' // 用echarts 的tree来展示左右合并关系
export default {
  data () {
    return {
      arr1: [
          {
            tableTitle: '4',
            label: 'IN'
          },
          {
            tableTitle: '5',
            label: 'OUT'
          },
          {
          tableTitle: '11',
          label: 'SQL'
          }, {
            tableTitle: '12',
            label: 'EX'
          }, {
            tableTitle: '13', // attr:1-分组，目录，2-叶子节点，表名，子菜单 11-sql,12-EXCEL,13-数据库表，14-自助数据集
            label: 'DB'
          }, {
          tableTitle: '14',
          label: 'SE'
        }],
      isShowLoading: false, // 默认不展示左右合并编辑
      masterTableName: this.$storeSave.state.mainTableData.name, // 主表名称
      detailDataList: [],
      eleviewType: 'add', // 默认新增关联关系
      updateData: {}, // 关联关系修改传过来的原始数据
      selectEletable: {}, // 选择的辅表
      isShowTreeLoading: false,
      isShowView: true, // 是否展示关联关系
      Tabletitle: '',
       relationType: '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
      relationTypeArr: [{value: 2, label: '左连接'}, {value: 3, label: '右连接'}],
      modelId: null,
      connId: '', // 数据库连接id
      isExitTable: false,
      modelId1: null,
      showeleviewsData: {}, // 展示关联关系数据
      filterText: '',
      valueId: this.value, // 初始值
      valueTitle: '',
      defaultExpandedKey: [],
      // selectVal:null,
      a: 1,
      isShowpup: false,
      // isShowpup:false,
      arr: [{leftKeyWords: '', label: '', RightKeyWords: ''}],

      selectTotal: [
        {}
      ], // 所有选好的关联数据汇总
      selectNewData: {},
       rightRowList: [],
      leftRowList: []
    }
  },
   components: {
    eleviewsDemo
    // TableDemo
  },
  computed: {
    // 新增自助数据集信息
    addelevanceObj () {
      return this.$storeSave.state.addelevanceObj
    },
    primaryObj () {
      return this.$storeSave.state.mainTableData
    }
  },

  mounted () {
        let param = {
        optMode: 'C', // A :add  B:update　Ｃ：查询
        modelId: this.$storeSave.state.updateObj.menuId || this.primaryObj.menuId,
        idType: 1,
        type: '1', // 只查询表  11-sql,12-EXCEL,13-数据库表，14-自助数据集,2-目录，3-菜单，4-数据连接，5-外部连接
        connId: this.primaryObj.connId,
        'pageNo': '1',
        'pageSize': '550'
        }
      // if(this.$storeSave.state.updateObj.menuId || this.primaryObj.menuId ){//选中主表
      // debugger
      //   this.queryFontNode(param,"theme") //theme主表  elevance关联表
      // }
  },
   watch: {
    value () {
      this.valueId = this.value
      this.initHandle()
    },
    isShowpup (val) {
      this.isShowView = !val
    },
    primaryObj () {
      let param = {
        optMode: 'C', // A :add  B:update　Ｃ：查询
        modelId: this.$storeSave.state.mainTableData.menuId,
        idType: 1,
        'pageNo': '1',
        'pageSize': '550',
        connId: this.$storeSave.state.mainTableData.connId
        }
          // 默认查询主表字段
       this.Tabletitle = this.$storeSave.state.mainTableData.name
       this.connId = this.$storeSave.state.mainTableData.connId
       debugger
      this.queryFontNode(param, 'theme', '11111') // theme主表  elevance关联表
    },
    filterText (val) {
      console.log(val)
      console.log('filterText')
      this.$refs.selectTree.filter(val)
    }
  },
  props: {
    menuData: {
      type: Object,
      default: null
    },
    makeType: {
      type: String,
      default: 'add'
    },
    // treeData:{
    //   type:Array,
    //   default:null
    // },
    /* 配置项 */
    props: {
      type: Object,
      default: () => {
        return {
          value: 'menuId', // ID字段名
          label: 'name', // 显示名称
          children: 'children', // 子级字段名
          checkStrictly: true
        }
      }
    },
    /* 选项列表数据(树形结构的对象数组) */
    options: {
      type: Array,
      default: () => { return [] }
    },
    /* 初始值 */
    value: {
      type: Number,
      default: () => { return null }
    },
    /* 可清空选项 */
    clearable: {
      type: Boolean,
      default: () => { return true }
    },
    /* 自动收起 */
    accordion: {
      type: Boolean,
      default: () => { return false }
    },
    placeholder: {
      type: String,
      default: () => { return '检索关键字' }
    }
  },
  created () {
    this.getTree()
  },
  methods: {
    // 新建关联
    clearS () {
      // 清除辅表字段
      this.eleviewType = 'add'
      this.rightRowList = ''// 清空关联表
      this.arr.forEach(ele => {
        ele.RightKeyWords = ''
      })
      this.clearHandle()
    },
    queryExitTable (data) {
      console.log('查询查询数据集是否存在数据源表-----------')
      console.log(data)
      debugger
        // 查询table数据预览
        this.isShowLoading = true
          this.$http.post(GET_DATAINFO, {
            'optMode': '1',
            'modelId': data.menuId,
            'pageNo': '1',
            'pageSize': '1'
          }).then(res => {
            this.isShowLoading = false
            debugger
            console.log({
              'optMode': '1',
              'modelId': data.menuId,
              'pageNo': '1',
              'pageSize': '1'})
            console.log('++++++++++++++++++++++++')
            console.log('查询查询数据集是否存在成功')
            console.log(res)
            if (res.data.code == 200) {
              console.log('已经新建任务')
              this.isExitTable = true
            } else {
              let param = this.$storeSave.state.addelevanceObj.menuId ? this.$storeSave.state.addelevanceObj : this.$storeSave.state.updateObj
              // if (!this.isExitTable) {
              //   this.createdTable(param)
              // }

              this.isShowLoading = false
            }
          }).catch(err => {
            this.isShowLoading = false
            console.log('查询查询数据集是否存在失败')
            console.log(err)
          })
      },
    // 新建任务
    createdTable (data) {
      console.log('-------=====主表信息')
    //   this.$storeSave.state.addelevanceObj={}//将新增数据置空
    //   this.$storeSave.state.updateObj={}//将将要修改的数据置空
    console.log(this.$storeSave.state.mainTableData)
    this.isShowLoading = true
    let tableId = getTime.getTime()
      let param = {
        'optMode': 'A',
        'modelId': this.$storeSave.state.addelevanceObj.menuId,
        'tableId': this.$storeSave.state.mainTableData.menuId,
        'modelName': this.$storeSave.state.addelevanceObj.name,
        'modelType': '4', // 固定值
        'connId': this.$storeSave.state.mainTableData.connId, // 主表
        'pcWhere': '',
        'pcGrp': ' ',
        'pcOrder': ' ',
        'flag': '0',
        'createdBy': this.$storeSave.state.userInfo.username || 'XXX',
        'createdDt': getTime.getTime(),
        'updatedBy': this.$storeSave.state.userInfo.username || 'XXX',
        'updatedDt': getTime.getTime(),
            'tdfrs': [{
              'tableId': this.$storeSave.state.mainTableData.menuId,
              'connId': this.connId,
              'tableName': this.$storeSave.state.mainTableData.tableName || '', // 主表英文名
              'alias': '', // 别名
              'tableCnname': this.$storeSave.state.mainTableData.name,
              'tableShowname': this.$storeSave.state.mainTableData.name,
              'srcType': '1',
              'srcLayer': '',
              'srcSubject': '',
              'srcTable': '',
              tdfds: []
            }]
      }
      console.log('新建任务传参数')
      console.log(param)
      this.$http.post(CUST_TABLE_MAINTAIN, param).then(res => {
        this.isShowLoading = false
        if (res.data.code == '200') {
          this.$emit('getconnId', this.connId)// 将连接id传父组件
          this.isExitTable = true
        } else {
          console.log('新建任务失败')
          // this.$alert(res.data.data, '提示', {
          //   confirmButtonText: '确定',
          //   callback: action => {
          //     return
          //   }
          // });
        }
        console.log('------------------------')
        console.log('新建任务成功出参')
        console.log(res)
      }, err => {
        this.isShowLoading = false
        // this.$alert('新建任务失败', '提示', {
        //   confirmButtonText: '确定',
        //   callback: action => {
        //     return
        //   }
        // });
        console.log('新建任务失败')
        console.log(err)
      })
    },
    tagisShowpup (makeData) {
      console.log('makeDatamakeDatamakeData')
      console.log(makeData)
      this.isShowpup = true
      this.updateData = makeData
      this.eleviewType = 'update'
      this.valueTitle = makeData[0].slaveTableName// 选择的表名字
      this.masterTableName = makeData[0].masterTableName // 主表名字
      this.relationTypeArr.forEach(ele => {
      if (ele.value == makeData[0].relationMode) {
        this.relationType = ele.label // 选的连接类型
      }
    })
      makeData.forEach((item, index) => {
        if (index == 0) {
          this.arr = [
            {
              leftKeyWords: `${item.masterShowfld}-${item.mFldType}`,
              label: `${item.masterShowfld}-${item.mFldType}`,
              RightKeyWords: `${item.slaveShowfld}-${item.sFldType}`

            }
          ]
        } else {
          this.arr.push({
            leftKeyWords: `${item.masterShowfld}-${item.mFldType}`,
            label: `${item.masterShowfld}-${item.mFldType}`,
            RightKeyWords: `${item.slaveShowfld}-${item.sFldType}`
          })
        }
      })
      console.log('this.arr00000000000000000000000000000000000000000')
      console.log(this.arr)
      console.log(makeData)
      let param = {
        optMode: 'C', // A :add  B:update　Ｃ：查询
        modelId: makeData[0].masterId, // 表id
        connId: null, // makeData[0].connId,
        idType: '1', // 1数据集,2来源表,3 SQL
        'pageNo': '1',
        'pageSize': '550'

      }
      // this.connId=makeData[0].connId
      debugger
      // 从关联视图传进来的的时候
      if (makeData.length > 0) {
        this.queryFontNode(param, 'theme', '2222222222')// 主表
        param.modelId = makeData[0].slaveId
        this.queryFontNode(param, 'elevance')
      }
    },
     // 当前表选字段
    minorTable (COLUNM_ID, ind) {
       let repeats = 0
      this.arr.findIndex((item, ind) => {
        if (item.RightKeyWords == COLUNM_ID) {
          repeats++
          if (repeats >= 2) {
            item.RightKeyWords = ''
            this.$alert('该字段已关联，请重新选择字段', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
                console.log('相等')
              }
            })
          }
        }
      })
      if (this.arr[ind].leftKeyWords !== '') { // 如果主表已经选择
      console.log('============')
      let rightData = this.rightRowList.find(
        item => {
          if (`${item.COMMENTS}-${item.DATA_TYPE}` == COLUNM_ID) {
            console.log(item)
            return item
            }
          })
      let leftData = this.leftRowList.find(item => {
        console.log(this.arr[ind].leftKeyWords)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == this.arr[ind].leftKeyWords) {
          this.arr[ind].label = `${item.COMMENTS}-${item.DATA_TYPE}`
          this.arr[ind].DATA_TYPE = item.DATA_TYPE
          return item
        }
      })
      let isSam = leftData.DATA_TYPE == rightData.DATA_TYPE
        console.log(isSam)
        if (!isSam) {
        this.$alert('关联数据类型不一致，请选择对应的字段关联', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.arr[ind].RightKeyWords = ''
            this.arr[ind].label = ''
            this.arr[ind].DATA_TYPE = ''
          }
        })
        }
        // else{
        //   this.saveDetailList()
        // }
      }
    },
    // saveDetailList(){
    //   console.log(this.arr)
    //   debugger
    //   this.arr.forEach((ele,key)=>{
    //   let rightInd=null //右侧字段id
    //   let leftInd =null //左侧字段id
    //   this.rightRowList.findIndex((item,ind) => {
    //     debugger
    //     if (item.COLUNM_ID == ele.RightKeyWords) {
    //       rightInd=key
    //     }
    //     });
    //     this.leftRowList.findIndex((item,ind) => {
    //     if (item.COLUNM_ID == ele.leftKeyWords) {
    //       leftInd=key
    //     }
    //     });
    //   this.detailDataList.push({
    //     relationId:this.rightRowList[leftInd].COLUNM_ID,//关联id
    //     masterFld:this.leftRowList[leftInd].COMMENTS,//主表字段
    //     masterShowfld:this.leftRowList[leftInd].COMMENTS, //主表字段显示名称
    //     slaveFld:this.rightRowList[rightInd].COMMENTS,//关联表字段
    //     slaveShowfld:this.rightRowList[rightInd].COMMENTS,//关联表字段显示名称
    //   })
    //   })
    //   this.$storeSave.state.detailDataList=this.detailDataList
    // },
    // 当前表选字段
    currentTable (COLUNM_ID, ind) {
      let repeats = 0
      this.arr.findIndex((item, ind) => {
        if (item.leftKeyWords == COLUNM_ID) {
          repeats++
          if (repeats >= 2) {
            item.leftKeyWords = ''
            this.$alert('该字段已关联，请重新选择字段', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
                console.log('相等')
              }
            })
          }
        }
        })
      if (this.arr[ind].RightKeyWords !== '') { // 如果辅表已经选择
      let leftData = this.leftRowList.find(
        item => {
          if (`${item.COMMENTS}-${item.DATA_TYPE}` == COLUNM_ID) {
            this.arr[ind].label = `${item.COMMENTS}-${item.DATA_TYPE}`
            debugger
            this.arr[ind].DATA_TYPE = item.DATA_TYPE
            console.log(item)
            console.log(this.arr)
            return item
            }
          })
      let rightData = this.rightRowList.find(item => {
        console.log(this.arr[ind].RightKeyWords)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == this.arr[ind].RightKeyWords) {
          console.log(item.COLUNM_ID)
          console.log(this.arr[ind].RightKeyWords)
          console.log(item)
          return item
        }
      })
        let isSam = leftData.DATA_TYPE == rightData.DATA_TYPE
        console.log(isSam)
        if (!isSam) {
        this.$alert('关联数据类型不一致，请选择对应的字段关联', '提示', {
          confirmButtonText: '确定',
            callback: action => {
              this.arr[ind].label = ''
              this.arr[ind].leftKeyWords = ''
              this.arr[ind].DATA_TYPE = ''
            }
          })
        } else {
          console.log('字段類型一致')
          this.saveDetailList()
        }
      }
    },
    // 选择连接类型
    selectChanged (val) {
      console.log(val)
    },
     // MGNDIRQUERY  查询目录
      getTree () {
        debugger
        let param = {
          parentId: '0',
          menuId: '0', // 0查询全树，否则查询该节点下树
          type: '1', //  // attr:1-分组，目录，2-叶子节点，表名，子菜单 11-sql,12-EXCEL,13-数据库表，14-自助数据集
          optMode: '1'
        }
        console.log(param)
        console.log('popup查询树传递参数')
        this.isShowTreeLoading = false
         this.$http.post(MGNDIRQUERY1, param).then(res => {
           console.log(res.status)
           console.log(res.data.data)
           console.log(res.data.data)
            console.log('popup查询树返回结果')
           if (res.data.code == '200' && res.data.data.length > 0) {
             debugger
            this.treeData = res.data.data
            this.cotton(res.data.data)
            // id不能与主表一致
            console.log(res.data.data)
           } else {
             this.treeData = []
           }
         })
      },
      // 通过传入key值返回名称
     getLabel (key) {
       let label = ''
       this.arr1.forEach(ele => {
         if (ele.tableTitle == key) {
           console.log(ele.label)
            label = ele.label
         }
       })
       return label
     },
      cotton (treeData) {
        treeData.forEach((ele, index) => {
          ele.name = `${this.getLabel(ele.type) ? this.getLabel(ele.type) + '——' + ele.name : ele.name}`
          // 判断有子元素,并且子元素的长度大于0就再次调用自身
          if (ele.children && ele.children.length > 0) {
            this.cotton(ele.children)
          }
        })
      },
    // 添加联合关联字段
    addNode () {
      console.log(this)
      console.log(this.rightRowList)
      console.log(this.rightRowList.length)
      let a = (this.arr.length) + 1
      this.arr.push({RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''})
    },
      deleteItem (index) {
      if (this.arr.length == 1) {
        this.arr = [{leftKeyWords: '', RightKeyWords: ''}]
        this.relationType = '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
        this.relationMode = '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
        this.selectNewData = {}
      } else {
        this.arr.splice(index, 1)
      }
    },
     cancelElevance () {
      this.isShowpup = false
    },
    closePage () {
      this.isShowpup = true
    },
    showPup () {
      if (this.$storeSave.state.mainTableData.menuId) {
        this.isShowpup = true
        this.masterTableName = this.$storeSave.state.mainTableData.name

        debugger
        let param = {
            optMode: 'C', // A :add  B:update　Ｃ：查询
            modelId: this.$storeSave.state.mainTableData.menuId, // 表id
            connId: null, // 连接ld
            'pageNo': '1',
            'pageSize': '1000',
            idType: '1'// 1数据集,2来源表,3 SQL
          }
            // 切换选项
            debugger
          this.queryFontNode(param, 'theme', '333333333')
          debugger
        // from ：theme主表  elevance关联表
        } else {
          this.$alert('请先从左侧选择主表', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
        }
    },
    addElevance () {
      // this.$storeSave.state.updateObj={}//将将要修改的数据置空
      // 进行非空校验
      // 先调用新增目录接口
      let isAdd = true
      // 成功后调用自助数据集接口
      this.arr.forEach((ele, index) => {
        console.log('循环每个arr')
        console.log(ele)
        if (!this.relationType) {
          isAdd = false
          this.$alert('请选择关联类型', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
        }
        if (!ele.RightKeyWords || !ele.leftKeyWords) {
          isAdd = false
          this.$alert('当前表和关联表字段不能为空', '提示', {
              confirmButtonText: '确定',
              callback: action => {

              }
            })
        }
      })
    let timeStr = getTime.getTime()
    debugger
    console.log(this.$storeSave.state.userInfo)
    console.log('this.$storeSave.state.userInfo---------------')
    console.log(this.selectNewData)
    console.log(this.updateData)

    let param = {
      optMode: this.eleviewType == 'add' ? 'A' : 'U', // A:新增 D:删除 U:修改
      relationId: this.eleviewType == 'add' ? `${timeStr}${this.arr.length}` : this.updateData[0].relationId, // 关联id（前端生成）
      modelId: this.eleviewType == 'add' ? this.addelevanceObj.menuId || this.$storeSave.state.updateObj.menuId : this.updateData[0].modelId, // 原始表模型id
      slaveId: this.eleviewType == 'add' ? this.selectNewData.menuId : this.updateData[0].slaveId, // 关联表id
      relationType: null, // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
      relationMode: this.relationType || this.updateData[0].relationMode || '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
      showPost: this.relationType > 3 ? 1 : 2, // 显示位置1-左，2-右
      seqno: '2', // 序号  获取外面有几个关联的元素 暂时写死
      createdBy: this.$storeSave.state.userInfo.username || 'XXX', // 创建人
      createdDt: 'a', // 创建日期
      updatedBy: this.$storeSave.state.userInfo.username || 'XXX',
      updatedDt: timeStr,
      lists: []
    }

    if (param.relationMode != '2' && param.relationMode != '3') {
      this.relationTypeArr.forEach(ele => {
        if (ele.label == this.relationType) {
          console.log(ele.value)
          // 解决下拉框反显文字，但是参数需要传数字的问题
          param.relationMode = ele.value
        }
      })
    }
    this.arr.forEach((ele, key) => {
      console.log(this.leftRowList)
      console.log(key, '------------')
      console.log(ele, '@@@@@@@@@')
      console.log(`${ele.leftKeyWords}`)
      console.log(`${ele.RightKeyWords}`)
      let rightInd = null // 右侧字段id
      let leftInd = null // 左侧字段id
      this.rightRowList.findIndex((item, ind) => {
          // console.log('&&&&&&&&&&&&&item')
          // console.log(item)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == ele.RightKeyWords) {
          rightInd = ind
        }
      })
      this.leftRowList.findIndex((item, ind) => {
        console.log(this.leftRowList)
        console.log('^^^^^^^^^^^^^^^^^')
        console.log(item)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == ele.leftKeyWords) {
          leftInd = ind
        }
      })
        console.log('leftInd', leftInd)
        console.log('rightInd', rightInd)
      param.lists.push({
        mFldType: this.leftRowList[leftInd].DATA_TYPE,
        sFldType: this.rightRowList[rightInd].DATA_TYPE,
        relationId: this.eleviewType == 'add' ? `${timeStr}${this.arr.length}` : this.updateData[0].relationId, // 关联id
        masterFld: this.leftRowList[leftInd].COLUMN_NAME, // 主表字段
        masterShowfld: this.leftRowList[leftInd].COMMENTS, // 主表字段显示名称
        slaveFld: this.rightRowList[rightInd].COLUMN_NAME, // 关联表字段
        slaveShowfld: this.rightRowList[rightInd].COMMENTS, // 关联表字段显示名称
        seqno: rightInd,
        createdBy: this.$storeSave.state.userInfo.username || 'XXX',
        createdDt: timeStr,
        updatedBy: this.$storeSave.state.userInfo.username || 'XXX',
        updatedDt: timeStr
      })
      console.log(this.rightRowList)
      console.log('参数')
      console.log(param)
      })
      if (isAdd) {
        this.isShowLoading = true
        this.$http.post(ADDMERGE, param).then(res => {
          this.isShowLoading = false
          if (res.data.code == '200') {
            this.arr = [{RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''}]
            // this.leftRowList=[];
            this.Tabletitle = ''
            this.rightRowList = []// 左右查询字段
            this.valueTitle = ''// 选中的表名称
          this.relationType = '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
          this.relationMode = '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
            this.$alert('数据集添加成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {

              }
            })
            this.showeleviewsData = param // 展示关联关系数据
            this.isShowpup = false
            this.$emit('getAssist', this.selectEletable)// 将附表字段信息发给父组件
          } else {
            this.$alert(res.data.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {

              }
            })
          }
        }).catch(err => {
          this.isShowLoading = false
          console.log(err)
          this.$alert('数据集添加失败', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
        })
      }
    },
    queryFontNode (param, from, a) {
      console.log(a)
      console.log('查询全字段入参', param)
      debugger
      this.isShowLoading = true
      // from ：theme主表  elevance关联表
      this.$http.post(QUERY_FONT_NODE, param).then(res => {
        console.log('group里全字段查询字段出参')
        console.log(res)
        this.isShowLoading = false
        if (res.data.code == '200' && res.data.data) {
          debugger
          if (from == 'theme' || from == 'eleview') { // 查询主表字段或者自助数据集的
            if (!this.isExitTable) {
              let data = {}
              if (this.addelevanceObj.menuId) {
                data = this.addelevanceObj
              } else if (this.$storeSave.state.addelevanceObj.menuId) {
                data = this.$storeSave.state.addelevanceObj
              } else if (this.$storeSave.state.updateObj.menuId) {
                data = this.$storeSave.state.updateObj
              }
              if (data.menuId) {
                this.queryExitTable(data)
              }
            }
            if (from == 'theme') { // this.$storeSave.state.mainTableData.menuId ||
              this.leftRowList = res.data.data
            }
          } else if (from == 'elevance') { // 查关联表字段
            this.rightRowList = res.data.data
          }
        } else {
          // from ：theme主表  elevance关联表
          if (from == 'theme') {
            this.leftRowList = []
            this.arr = [{RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''}]
          } else if (from == 'elevance') {
            this.rightRowList = []
            this.arr = [{RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''}]
          }
        }
      }).catch(err => {
        this.isShowLoading = false
        if (from == 'theme') {
            this.leftRowList = []
            this.arr = [{RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''}]
          } else if (from == 'elevance') {
            this.rightRowList = []
            this.arr = [{RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''}]
          }
          this.$confirm(`全字段查询,${err.data.message}`, '提示', {
            confirmButtonText: '确定'
          })
          console.log(err)
      })
    },
    // 初始化值
    initHandle () {
      console.log('initHandle')
      if (this.valueId) {
        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label] // 初始化显示
        this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
        this.defaultExpandedKey = [this.valueId] // 设置默认展开
      }
      this.initScroll()
    },
    // 初始化滚动条
    initScroll () {
      this.$nextTick(() => {
        let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
        let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
        scrollBar.forEach(ele => ele.style.width = 0)
      })
    },
    // 切换选项
    handleNodeClick (node) {
      if (node.attr != '1') {
        this.arr.forEach(ele => {
          ele.RightKeyWords = ''
        })
        if (node[this.props.value] == this.$storeSave.state.mainTableData.menuId) { // 辅表id和主表id一致的情况下
          this.$alert('主表不能作为关联表，请重新选择', '提示', {
            confirmButtonText: '确定'
          })
        } else if (node.type != '13') {
          this.$alert('关联表只能是数据库表，请重新选择', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          debugger
          this.valueId = node[this.props.value]
          this.valueTitle = node[this.props.label]
          this.$emit('getValue', this.valueId)
          this.defaultExpandedKey = []
          this.selectEletable = node
          // 去查询字段
          // 假设字段是rowList
          this.selectNewData.menuId = node.menuId
          let param = {
            optMode: 'C', // A :add  B:update　Ｃ：查询
            modelId: node.menuId, // 表id
            connId: node.connId, // 连接ld
            'pageNo': '1',
            'pageSize': '550',
            idType: '1'// 1数据集,2来源表,3 SQL
          }
            // 切换选项
          this.queryFontNode(param, 'elevance')
        // from ：theme主表  elevance关联表
          }
      }
    },
    // 清除选中
    clearHandle () {
      this.valueTitle = ''
      this.valueId = null
      this.defaultExpandedKey = []
      this.clearSelected()
      this.$emit('getValue', null)
    },
    /* 清空选中样式 */
    clearSelected () {
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element) => element.classList.remove('is-current'))
    },
    filterNode (value, data) {
      console.log('filterNode')
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    closePup () {
        this.isShowpup = false// 关闭弹窗
        this.eleviewType = 'add'
        this.arr = [{leftKeyWords: '', RightKeyWords: ''}]// 重置生成select框的数据
        this.relationType = '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
        this.relationMode = '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
        this.selectNewData = {}
        this.updateData = {}
        // this.eleviewType="add"
        this.valueTitle = ''
        this.rightRowList = []
      },
      closeView () {
        // this.isShowpup=true
        this.isShowView = false
      }
  }
}
</script>
<style lang="less" scoped>
.selectTableS{
    width:400px;
    height: 370px;
    background: #fff;
  }
  .left,.right,.center{
    width: 200px;
    height: 200px;
    border:1px solid #17a2b8;
  }
  .pup{

    .popup{
    min-width: 53rem;
    height: calc(100% - 2px);
    background: #fff;
    border-radius:6px;
    margin:3px auto;
    padding: 8px;

    .itemBox{
      height: calc(100% - 120px);
      margin:15px auto;
      display: flex;
      justify-content: space-between;
      border: 1px solid #ccc;
      border-radius: 5px;
      // padding: 10px 0;

      .item{
        text-align: center;
        width: 27%;
        padding:15px 0;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        .activeStyle{
          background: rgb(158, 194, 201);
          border-radius:5px ;
        }

      }
      .pRight{
        width:33%;
        }
    }
  }
  }
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  .el-tree .el-tree-node__content{
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }
  .selectInput{
    padding: 0 5px;
    box-sizing: border-box;
  }
</style>
